<template>
  <view>
    <u-navbar :is-back="true" title="商家中心" title-size="36" height="50"> </u-navbar>

    <u-gap height="20"></u-gap>
    <view class="card store-info dis-flex flex-y-center" v-if="storeInfo">
      <u-image :src="storeInfo.logo" width="150rpx" height="150rpx" border-radius="10"></u-image>
      <view class="info dis-flex flex-y-between">
        <view class="tl">{{ storeInfo.name }}</view>
        <view class="houre">营业时间：{{ storeInfo.businessHours }}</view>
        <view class="dis-flex flex-y-center flex-y-between">
          <view class="star">
            综合评分：
            <text class="star-num">{{ (storeInfo.scoreLevel * 10 * 0.1).toFixed(1) }}分</text>
          </view>
          <!-- <view class="charge dis-flex flex-y-center">
						<u-icon name="/static/store/rzjf.png" size="48"></u-icon>
						<text>入驻缴费</text>
					</view> -->
        </view>
      </view>
    </view>

    <u-gap height="20"></u-gap>
    <view class="card">
      <view class="card-tl dis-flex flex-y-between">
        <view>产品管理</view>
        <view
          style="color: #aba9a2; font-size: 22rpx"
          @click="routeTo('/store/goods-list/goods-list?shopId=' + storeInfo.id)"
        >
          <text>更多</text>
          <u-icon name="/static/enter.png" size="18rpx"></u-icon>
        </view>
      </view>
      <view class="dis-flex">
        <view
          class="amount-item"
          @click="routeTo(amount.path + '&shopId=' + storeInfo.id)"
          v-for="(amount, i) in goodsAmount"
          :key="i"
        >
          <view class="count">{{ amount.count }}</view>
          <view class="name">{{ amount.name }}</view>
        </view>
      </view>
    </view>

    <u-gap height="20"></u-gap>
    <view class="card">
      <view class="card-tl dis-flex flex-y-between">
        <view>我的订单</view>
        <view
          style="color: #aba9a2; font-size: 22rpx"
          @click="routeTo('/store/order-list/order-list')"
        >
          <text>更多</text>
          <u-icon name="/static/enter.png" size="18rpx"></u-icon>
        </view>
      </view>
      <view class="dis-flex">
        <view
          class="amount-item"
          @click="routeTo(amount.path)"
          v-for="(amount, i) in orderAmount"
          :key="i"
          v-if="amount.level ? amount.level === userLevel : true"
        >
          <view class="count">{{ amount.count }}</view>
          <view class="name">{{ amount.name }}</view>
        </view>
      </view>
    </view>

    <u-gap height="20"></u-gap>
    <view class="card">
      <view class="card-tl dis-flex flex-y-between">
        <view>营收统计</view>
      </view>
      <view class="dis-flex" style="flex-wrap: wrap">
        <view
          class="amount-item"
          @click="routeTo(amount.path)"
          v-for="(amount, i) in companyAmount"
          :key="i"
          v-if="amount.level ? amount.level === userLevel : true"
        >
          <view class="count">{{ amount.count }}</view>
          <view class="name">{{ amount.name }}</view>
        </view>
      </view>
    </view>

    <u-gap height="20"></u-gap>
    <view class="card dis-flex flex-y-between" @click="manageStaff()">
      <view class="dis-flex flex-x-center">
        <text>店员及相关人员管理</text>
      </view>
      <u-icon name="/static/enter.png" size="20rpx"></u-icon>
    </view>
    <u-line></u-line>
    <view class="card dis-flex flex-y-between" @click="scanCode()">
      <view class="dis-flex flex-x-center">
        <text>订单核销</text>
      </view>
      <u-icon name="/static/enter.png" size="20rpx"></u-icon>
    </view>
    <u-line></u-line>
    <view class="card dis-flex flex-y-between" @click="qrcodeShow = true">
      <view class="dis-flex flex-x-center">
        <text>经营推广收款码</text>
      </view>
      <u-icon name="/static/enter.png" size="20rpx"></u-icon>
    </view>

    <view class="des" @click="show = true">
      <view>更多管理功能请至PC端管理后台操作</view>
      <view class="line">PC端后台登录链接及账号</view>
    </view>

    <u-popup
      v-model="show"
      mode="bottom"
      width="750"
      height="600"
      :closeable="true"
      border-radius="20"
    >
      <view class="account" v-if="account">
        <view class="account-des">注：请复制下面链接到电脑端浏览器中打开登录</view>
        <view class="account-info">
          <view class="url-tl">商家后台管理登录链接</view>
          <view
            @click="handleCopy(account.url)"
            style="margin-bottom: 40rpx"
            class="url-box dis-flex flex-y-center flex-y-between"
          >
            <text style="margin-right: 10rpx">{{ account.url }}</text>
            <u-icon name="/static/store/fz.png" size="28"></u-icon>
          </view>
          <view class="url-tl">商家后台管理登录账号</view>
          <view class="url-box">
            <view class="">登录账号：{{ account.username }}</view>
            <view class="">{{ account.tips }}</view>
          </view>
        </view>
      </view>
    </u-popup>

    <view class="tishi-warpper">
      <u-popup
        class="teshu"
        v-model="qrcodeShow"
        border-radius="16"
        :mask-close-able="false"
        mode="center"
        width="600rpx"
        height="auto"
      >
        <view class="tishi-box">
          <view class="content">
            <view
              class="qrcode-box dis-flex flex-y-center"
              :style="{
                backgroundImage: `url(${getImageUrl('qr-bg.png')})`
              }"
            >
              <u-image :src="qrcode" width="360rpx" height="360rpx"></u-image>
              <view class="ti">商家收款码/推广码</view>
            </view>
            <view class="user-info-1 dis-flex flex-y-center">
              <u-avatar :src="userInfo.avatar" size="80"></u-avatar>
              <view class="info dis-flex flex-y-between">
                <view>{{ userInfo.nickname }}</view>
                <view class="tel">{{ formatPhone(userInfo.mobile) }}</view>
              </view>
            </view>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view class="yaoqing" @click="shareQrcode">立即邀请好友</view>
          <!-- #endif -->
          <view class="ts-close">
            <u-icon size="28" name="close" color="#ffffff" @click="qrcodeShow = false"></u-icon>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      storeInfo: null,
      show: false,
      account: null,
      clerkNo: '',
      userInfo: uni.getStorageSync('userInfo'),
      qrcodeShow: false,
      qrcode: '',
      goodsAmount: [
        {
          id: 'all',
          name: '全部',
          count: 0,
          path: '/store/goods-list/goods-list?tabType=all'
        },
        {
          id: 'for_sale',
          name: '出售中',
          count: 0,
          path: '/store/goods-list/goods-list?tabType=for_sale'
        },
        {
          id: 'in_warehouse',
          name: '已下架',
          count: 0,
          path: '/store/goods-list/goods-list?tabType=in_warehouse'
        },
        {
          id: 'sold_out',
          name: '已售罄',
          count: 0,
          path: '/store/goods-list/goods-list?tabType=sold_out'
        } /*,
        {
          id: 'recycle_bin',
          name: '回收站',
          count: 0,
          path: '/store/goods-list/goods-list?tabType=recycle_bin'
        }*/
      ],
      orderAmount: [
        {
          id: 'income',
          name: '待发货/待配送',
          count: 0,
          path: '/store/order-list/order-list?tabType=10'
        },
        {
          id: 'income',
          name: '待收货/待核销',
          count: 0,
          path: '/store/order-list/order-list?status=20'
        },
        {
          id: 'syc',
          name: '退款售后',
          count: 0,
          path: '/store/order-list/order-refund-list'
        }
      ],
      companyAmount: [
        {
          id: 'income',
          name: '今日收益',
          count: 0,
          path: '/store/income?status=1'
        },
        {
          id: 'income',
          name: '待入账收益',
          count: 0,
          // level: 2,
          path: '/store/income?status=0'
        },
        {
          id: 'syc',
          name: '累计总收益',
          count: 0,
          path: '/store/income?type=count'
        },
        {
          id: 'syc',
          name: '当前贡值',
          count: 0,
          path: '/store/growth'
        },
        {
          id: 'syc',
          name: '推广无效会员',
          count: 0,
          // level: 2,
          path: '/store/teams?valid=false'
        },
        {
          id: 'syc',
          name: '推广总会员',
          count: 0,
          // level: 2,
          path: '/store/teams?valid=true'
        }
      ]
    }
  },
  onLoad(options) {
    this.clerkNo = options.code || ''
    this.$u.get('/app-api/shop/info/my').then((res) => {
      this.storeInfo = res.data
    })
    this.$u.get('/app-api/shop/admin/get-account').then((res) => {
      if (res.data && res.data.username) {
        this.account = res.data
      } else {
        this.$u.toast('您还不是商家')
        setTimeout(function () {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1000)
      }
    })
    this.$u.get('/app-api/shop/statistics/summary').then((res) => {
      if (!res.data || !res.data.revenueCount) {
        this.$u.toast('您还不是商家')
        setTimeout(function () {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1000)
        return
      }
      this.qrcode = res.data.qrcode
      if (res.data.orderCount) {
        this.orderAmount[0].count = res.data.orderCount.paidCount
        this.orderAmount[1].count = res.data.orderCount.doingCount
        this.orderAmount[2].count = res.data.orderCount.refundCount
      }
      if (res.data.revenueCount) {
        this.companyAmount[0].count = (res.data.revenueCount.todayUnfreezeCount * 0.01).toFixed(2)
        this.companyAmount[1].count = (res.data.revenueCount.freezingCount * 0.01).toFixed(2)
        this.companyAmount[2].count = (res.data.revenueCount.totalUnfreezeCount * 0.01).toFixed(2)
      }
      if (res.data.digitalAssets) {
        this.companyAmount[3].count = res.data.digitalAssets.growth
      }
      if (res.data.vipCount) {
        this.companyAmount[4].count = res.data.vipCount.invalidCount
        this.companyAmount[5].count = res.data.vipCount.validCount
      }
    })
  },
  onShow() {
    this.$u.get('/app-api/product/spu/get-count-for-seller').then((res) => {
      console.log(res.data)
      this.goodsAmount[1].count = Number(res.data['FOR_SALE'])
      this.goodsAmount[2].count = Number(res.data['IN_WAREHOUSE'])
      this.goodsAmount[3].count = Number(res.data['SOLD_OUT'])
      // this.goodsAmount[4].count = Number(res.data['RECYCLE_BIN'])
      this.goodsAmount[0].count =
        this.goodsAmount[1].count + this.goodsAmount[2].count + this.goodsAmount[3].count
    })
  },
  methods: {
    toHome() {
      uni.reLaunch({
        url: '/pages/index/index'
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    // 复制指定内容
    handleCopy(value) {
      const app = this
      uni.setClipboardData({
        data: value,
        success: () => app.$u.toast('复制成功'),
        fail: ({ errMsg }) => app.$u.toast('复制失败 ' + errMsg)
      })
    },
    toClerk() {
      const app = this
      if (!app.clerkNo) {
        app.$u.toast('请扫码获取或输入核销码')
        return
      }
      app.$u
        .get('/app-api/trade/order/get-by-verify-code', {
          verifyCode: app.clerkNo
        })
        .then((res) => {
          if (res.code === 0) {
            app.$u.route('/store/action', {
              code: app.clerkNo
            })
            app.clerkNo = ''
          } else {
            app.clerkNo = ''
            app.$u.toast(res.msg)
          }
        })
    },
    shareQrcode() {
      let app = this
      let file = app.qrcode
      wx.downloadFile({
        url: file,
        success: (res) => {
          console.log({
            success: res
          })
          wx.showShareImageMenu({
            path: res.tempFilePath,
            success: (re) => {
              console.log({
                success1: re
              })
            },
            fail: (re) => {
              console.log({
                fail1: re
              })
            }
          })
        },
        fail: (res) => {
          console.log({
            fail: res
          })
        }
      })
    },
    scanCode() {
      uni.navigateTo({
        url: '/store/scan'
      })
    },
    manageStaff() {
      uni.navigateTo({
        url: '/store/staff'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin: auto;
  width: 710rpx;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 30rpx 20rpx;
  text-align: center;
}

.store-info {
  text-align: left;

  .info {
    height: 150rpx;
    flex-flow: column;
    margin-left: 20rpx;
    flex: 1;

    .tl {
      font-weight: 600;
      font-size: 34rpx;
      color: #333333;
    }

    .houre {
      font-size: 26rpx;
      color: #666666;
    }

    .star {
      font-size: 26rpx;
      color: #666666;

      &-num {
        font-weight: 600;
        font-size: 34rpx;
        color: #ff7626;
      }
    }

    .charge {
      width: 188rpx;
      height: 52rpx;
      background: #dff5f2;
      border-radius: 26rpx;

      text {
        color: #10a28f;
        padding-left: 10rpx;
        line-height: 52rpx;
      }
    }
  }
}

.box {
  display: flex;
  flex-flow: column;
  align-items: center;
  padding: 61rpx 0;

  .card-tl {
    margin-bottom: 60rpx;
    font-size: 30rpx;
  }

  .card-input {
    width: 650rpx;
    height: 100rpx;
    background: #f5f5f5;
    border-radius: 50rpx;
    margin-bottom: 60rpx;
  }

  .bt {
    width: 650rpx;
    height: 100rpx;
    line-height: 100rpx;
    background: #10a28f;
    border-radius: 50rpx;
    font-size: 32rpx;
    color: #ffffff;
  }
}

.des {
  font-size: 28rpx;
  color: #999999;
  text-align: center;
  margin-top: 120rpx;
  line-height: 48rpx;

  .line {
    text-decoration: underline;
  }
}

.account {
  padding: 80rpx 20rpx 50rpx 20rpx;

  &-des {
    color: #f54831;
    margin-bottom: 30rpx;
  }

  &-info {
    .url-tl {
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }

    .url-box {
      width: 710rpx;
      background: #f5f5f5;
      border-radius: 10rpx;
      padding: 25rpx 20rpx;
      line-height: 48rpx;
    }
  }
}

.amount-item {
  text-align: center;
  justify-content: space-between;
  display: flex;
  flex-flow: column;
  width: 33%;
  margin-top: 30rpx;

  .count {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .name {
    font-size: 26rpx;
  }
}

::v-deep.tishi-warpper .teshu .u-mode-center-box {
  background-color: transparent !important;
}

.tishi-box {
  position: relative;
  display: flex;
  flex-flow: column;

  .content {
    background-color: #fff;
    // border-radius: 20rpx;
    // padding: 30rpx 20rpx;
    border-radius: 16rpx;
  }

  .ts-close {
    margin: auto;
    margin-top: 60rpx;
    width: 64rpx;
    height: 64rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.qrcode-box {
  width: 600rpx;
  height: 600rpx;
  justify-content: space-around;
  flex-flow: column;
  padding: 50rpx 0;
  background-position: center;
  background-size: cover;
  .ti {
    font-size: 36rpx;
    color: #333333;
  }
}

.user-info-1 {
  padding: 52rpx 20rpx;
  .info {
    margin-left: 10rpx;
    height: 80rpx;
    flex-flow: column;
    .tel {
      font-size: 24rpx;
      color: #666666;
    }
  }
}
.yaoqing {
  width: 600rpx;
  height: 80rpx;
  background: #10a28f;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #ffffff;
  line-height: 80rpx;
  text-align: center;
  margin-top: 40rpx;
}
</style>
